<!DOCTYPE html>
<html>
<head>
    <!-- meta -->
    <meta name="mobile-web-app-capable" charset="utf-8" content="yes">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1,target-densitydpi=device-dpi, viewport-fit=cover" />
    <!-- title -->
    <title>Update...</title>
    <script>
      window.nodeRequire = require;
      delete window.require;
      delete window.exports;
      delete window.module;
    </script>
    <link rel="stylesheet" href="JSplugins/angular-material-lite/material-design-lite/material.css"/>
    <link rel="stylesheet" href="JSplugins/angular-material-lite/angular-material-lite.css"/>
    <link rel="stylesheet" href="css/app.css"/>
    <link rel="stylesheet" href="css/smes.css"/>

    <script defer src="JSplugins/jQuery/jquery-1.12.4.min.js"></script>
    <script defer src="JSplugins/fastclick/lib/fastclick.js"></script>
    <script defer src="JSplugins/angular-material-lite/material-design-lite/material.js"></script>
    <script defer src="JSplugins/moment/moment.min.js"></script>
    <script defer src="JSplugins/angular/angular.min.js"></script>
    <script defer src="JSplugins/angular-translate/angular-translate.min.js"></script>
    <script defer src="JSplugins/angular-translate/loader-static-files.min.js"></script>
    <script defer src="JSplugins/angular-css/angular-css.js"></script>
    <script defer src="JSplugins/angular-material-lite/angular-material-lite.js"></script>
    <script defer src="module/system/program/update/update.js"></script>
    <script defer src="module/system/program/update/startup.js"></script>

    <script src="cordova.js"></script>
    <script src="JSplugins/cordova/Insomnia.js"></script>
    <!-- style -->
    <style type="text/css">
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            /* display: none; <- Crashes Chrome on hover */
            -webkit-appearance: none;
            margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
        }
        .update-content{
            background: linear-gradient(to top left, rgb(194, 225, 235) 20%, rgba(0, 111, 125, 0.8) 100%);
            width: 100%;
            height: 100%;
            padding: 0px;
            box-sizing: border-box;
        }
		.update-content.full{
			width:100%;
		}
        .msg{
            overflow: hidden;
        }
        .update-title{
            height: 10%;
            margin: 8px;
            overflow: auto;
        }
        .kmi-text-fields--triangle{
            border: 1px solid #FFFFFF;
        }
        .kmi-text-fields--triangle .label{
            height: 30px;
        }
        .kmi-text-fields--triangle .label>label:FIRST-CHILD{
            background-color: #1ab7cd;
            height: 30px;
        }
        .kmi-text-fields--triangle .triangle{
            border-color: transparent transparent transparent #1ab7cd;
            border-width: 30px 0 0 34px;
        }
        .kmi-text-fields--triangle .input> select{
            border: 0px;
            height: calc(100% - 2px);
            font-size: 16px;
            outline: none;
            padding-left: 4px;
            flex: 1;
            width: 100%;
            background: none;
            text-align-last: center;
        }
        .update-content .kmi-header-row{
            height: 45px;
            position: relative;
            border-radius:4px 4px 0 0;
            -webkit-app-region: drag;
            background: none;
        }
        .header-pro-logo{
            position: absolute;
            top: 10px;
            left: 8px;
            width: 140px;
            height: 28px;
            /*background-image: url(image/PN_home.png);*/
            background-size: cover;
        }
        @media (max-width: 600px) and (max-height:900px){
            .kmi-text-fields--triangle{
                flex-direction: column;
                height: 64px;
                align-items: flex-start;
                background: none;
                border: 0px;
            }
            .kmi-text-fields--triangle .label>label:FIRST-CHILD{
                border: 1px solid #ffffff;
                border-bottom: 0px;
            }
            .kmi-text-fields--triangle .input{
                background: white;
                border: 1px solid #ffffff;
            }
        }
        @media (max-width: 900px) and (max-height:600px) {
            .kmi-text-fields--triangle{
                flex-direction: column;
                height: 64px;
                align-items: flex-start;
                background: none;
                border: 0px;
            }
            .kmi-text-fields--triangle .label>label:FIRST-CHILD{
                border: 1px solid #ffffff;
                border-bottom: 0px;
            }
            .kmi-text-fields--triangle .input{
                background: white;
                border: 1px solid #ffffff;
            }
        }
    </style>
</head>
<body>
    <div class="update-content mdl-shadow--8dp" id='update_controller' ng-controller="update_controller" ng-init="init();" ng-class="{'full':isFull}" style="display:none;">
        <div class="kmi-header-row">
            <div class="header-pro-logo" style="background-image: url(image/{{logoURL}});"></div>
        </div>
        <!-- 20221117 modify by Alan for M#118591:  修正更新訊息的排版 -->
        <div class="msg" style="display:flex;padding: 20px;color: #ffffff;">
            <!--<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"  ng-show="mode != 'setting'"></div>-->
            <!--<img src="image/loading_update.gif"/>-->
            <div class="update-title" id="update_log"></div>
        </div>
        <div ng-show="mode == 'setting'" style="padding: 0 8px 8px 28px;">
            <div class="kmi-text-fields--triangle fields-ip" >
                <div class="label">
                    <label ng-bind="'update.server.ip' | translate"></label>
                    <label class="triangle"></label>
                </div>
                <div class="input ipaddress" ng-show="hostname == '' ">
                    <input ng-repeat="ip in serverIp track by $index" type="text" ng-model="serverIp[$index]" mdl-calculater="serverIp[$index]" ></input>
                </div>
                <div class="input hostname" ng-show="hostname != '' ">
                    <input type="text" ng-model="hostname"></input>
                </div>
            </div>
            <div class="kmi-text-fields--triangle" >
                <div class="label">
                    <label ng-bind="'update.server.port' | translate"></label>
                    <label class="triangle"></label>
                </div>
                <div class="input">
                    <input type="text" ng-model="port" mdl-calculater="port" ></input>
                </div>
            </div>
            <div class="kmi-text-fields--triangle" >
                <div class="label">
                    <label ng-bind="'update.environment' | translate"></label>
                    <label class="triangle"></label>
                </div>
                <div class="input">
                    <select ng-model="environment" ng-options="key as ('update.env.'+key|translate) for (key, server) in config.serverList">
                    </select>
                    <input type="text" ng-model="server.name" ng-show="environment == 'Customer'" placeholder="{{'update.msg.customer_server_name'|translate}}"></input>
                </div>
            </div>
            <div class="kmi-text-fields--triangle" >
                <div class="label">
                    <label ng-bind="'update.version.label' | translate"></label>
                    <label class="triangle"></label>
                </div>
                <div class="input">
                    <select ng-model="update_version" ng-options="('update.version.'+version|translate) for version in versionList"/>
                    </select>
                </div>
            </div>

            <div style="display:flex;justify-content: space-between;">
                <div class="kmi-text-fields--triangle" style="align-self: center;margin-bottom: 0px;">
                    <div class="label">
                        <label ng-bind="'update.view_mode.m' | translate"></label>
                        <label class="triangle"></label>
                    </div>
                    <div class="input">
                        <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="ChangeViewMode('pad')" style="flex: 1;height: 32px;width:20vw;">
                            <img ng-src="{{view_mode != 'phone'?'image/icons/check1.png':'image/icons/check0.png'}}"></img>
                            {{'update.view_mode.m_pad' | translate}}
                        </button>
                        <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="ChangeViewMode('phone')"  style="flex: 1;height: 32px;width:20vw;">
                            <img ng-src="{{view_mode == 'phone'?'image/icons/check1.png':'image/icons/check0.png'}}"></img>
                            {{'update.view_mode.m_phone' | translate}}
                        </button>
                    </div>
                </div>
                <div class="kmi-button kmi-button-confrim"ng-click="reCheckUpdate()" style="width:100px">
                    <label ng-bind="'common.btn.retry' | translate"></label></label>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="kmi-button kmi-button-confrim" ng-if="isElectron" ng-click="close();" style="width:100px">
                    <label ng-bind="'common.btn.close' | translate"></label></label>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
